<template>
	<div class="boxall" style="padding: 0 0.2rem 0.4rem 0.15rem; height: 3.4rem">
		<div class="alltitle">商品分类</div>
		<div class="allnav" id="class"></div>
		<div class="boxfoot"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				classDom: null,
				classOption: []
			};
		},
		methods: {
			async classData(isLoading = true) {
				if (isLoading) {
					this.classDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51)'
					});
				}

				const res1 = this.$db['wmzmall-goods, wmzmall-goods-category']
					.collection()
					.action('base-where-action')
					.where({
						shop_id:uni.getStorageSync('wmzadmin_user_shop_id')
					})
					.groupBy('cid')
					.groupField('count(*) as cnt')
					.orderBy('cnt desc')
					.limit(8)
					.end();

				let classDatas = {
					code: 0,
					datas: []
				};

				await Promise.all([res1]).then(resData => {
					resData[0].result.data.forEach(x => {
						classDatas.datas.push({
							name: x.cid[0].name,
							cnt: x.cnt
						});
					});
				}).catch(() => {
					if (isLoading) {
						this.classDom.hideLoading();
					}
				})

				if (isLoading) {
					this.classDom.hideLoading();
				}

				if (classDatas.datas.length > 0) {
					classDatas.code = 200;
				}

				if (classDatas.code == 200) {
					this.classOption.series[0].data = [];
					classDatas.datas.forEach(x => {
						this.classOption.series[0].data.push({
							name: x.name,
							value: x.cnt
						});
					});
				}
				this.classDom.setOption(this.classOption);
			},
			classCharts(callback) {
				this.classDom = this.$echarts.init(document.getElementById('class'));

				this.classOption = {
					legend: {
						orient: 'vertical',
						x: 'left',
						textStyle: {
							color: 'rgba(255,255,255,.6)'
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: ' {b}: {c} ({d}%)     '
					},
					series: [{
						type: 'pie',
						radius: '70%',
						selectedMode: 'single',
						selectedOffset: 10,
						clockwise: true,
						center: ['50%', '50%'],
						itemStyle: {
							borderWidth: '20',
							color: 'pink',
							borderColor: '#FFF',
							normal: {
								borderWidth: '2',
								borderColor: 'rgba(4, 6, 51,2)'
							}
						},
						roseType: 'radius',
						color: ['#43cadd', '#3893e5', '#FBFE27', '#ff6a6c'],
						data: []
					}]
				};

				window.addEventListener('resize', () => {
					this.classDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			}
		},
		mounted() {
			this.classCharts(() => {
				this.classData();
			});
		},
		created() {
			uni.$on('biRefresh', () => {
				this.classData(false);
			});
		}
	};
</script>

<style></style>
